<template>
  <el-menu active-text-color="#409eff" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
    style="width: 200px" text-color="#fff" router>
    <div class="text">
      SAME MODEL
      <!-- <img src="../../../assets/image/logo.jpg" alt=""> -->
    </div>
    <el-menu-item index="/back/home">
      <el-icon>
        <Menu />
      </el-icon>
      <span>Home Settings</span>
    </el-menu-item>

    <el-menu-item index="/back/women">
      <el-icon>
        <Female />
      </el-icon>
      <span>Female model</span>
    </el-menu-item>

    <el-menu-item index="/back/inTown" style="display: flex;align-items: center;">
      <svg style="margin-right: 8px" t="1725629067681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3291" width="20" height="20">
        <path
          d="M727.108267 486.126933a17.134933 17.134933 0 0 0-21.435734 0L552.413867 609.553067A16.861867 16.861867 0 0 0 546.133333 622.728533v315.733334a17.271467 17.271467 0 0 0 17.271467 17.271466h101.9904a17.271467 17.271467 0 0 0 17.271467-17.271466V819.2h68.266666v119.261867a17.271467 17.271467 0 0 0 17.271467 17.271466h101.9904a17.271467 17.271467 0 0 0 17.271467-17.271466V622.592a17.066667 17.066667 0 0 0-6.417067-13.653333zM682.666667 750.933333H614.4v-68.266666h68.266667z m136.533333 0h-68.266667v-68.266666h68.266667zM389.802667 123.904a17.2032 17.2032 0 0 0-28.672 0L139.400533 405.230933a17.2032 17.2032 0 0 0-2.8672 9.557334v523.6736a17.2032 17.2032 0 0 0 17.134934 17.271466h170.666666A17.2032 17.2032 0 0 0 341.333333 938.530133V819.2h68.266667v119.330133a17.2032 17.2032 0 0 0 17.2032 17.2032H477.866667V546.133333a34.133333 34.133333 0 0 1 12.834133-26.692266L614.4 409.6c0-3.413333-224.597333-285.696-224.597333-285.696zM273.066667 682.666667H204.8V614.4h68.266667z m0-204.8H204.8V409.6h68.266667z m136.533333 204.8H341.333333V614.4h68.266667z m0-204.8H341.333333V409.6h68.266667z"
          p-id="3292" fill="#ffffff"></path>
      </svg>
      <span>In Town model</span>
    </el-menu-item>

    <el-menu-item index="/back/men">
      <el-icon>
        <Male />
      </el-icon>
      <span>Male model</span>
    </el-menu-item>

    <el-menu-item index="/back/profile">
      <el-icon>
        <User />
      </el-icon>
      <span>Personal</span>
    </el-menu-item>


  </el-menu>
</template>

<script lang="ts" setup>
import { Operation, User, Guide, Menu, Male, Female, InfoFilled, MessageBox, UserFilled } from "@element-plus/icons-vue";

</script>

<style scoped lang="scss">
.el-menu-vertical-demo {
  min-height: 100vh;
  height: 100%;
}

.text {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  font-weight: bold;


}
</style>
